<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/ten.css">
    <link rel="stylesheet" href="font/font4/iconfont.css">

    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">

    <title>Document</title>
</head>
<body>
    <div class="top">
        <i class="iconfont icon-fanye1 t-picture"></i>
        <p>特卖N元场</p>
        <i class="iconfont icon-more t-picture"></i>
    </div>
    <div class="search">
        <input type="text" placeholder="特惠专区">
    </div>


    <!-- swiper自动轮播 -->
    <div class="swiper-container slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide ">
                <img class="lunbo" src="https://img63.ddimg.cn/upload_img/00785/tsth/1242x524_1123-1637664932.jpg" alt="">
            </div>
            <div class="swiper-slide ">
                <img class="lunbo" src="https://img60.ddimg.cn/upload_img/00785/ts495/1242x524-1637806917.jpg" alt="">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>


    <ul class="hot-type">
        <li>热门分类</li>
        <li>图书狂欢</li>
        <li>文教好书</li>
        <li>文学艺术</li>
        <li>人文社科</li>
    </ul>
    <ul class="N-session">
        <li>N元专场</li>
        <li>49元10件</li>
        <li>49元5件</li>
        <li>88元10件</li>
        <li>88元5件</li>
    </ul>
    
    <!-- 童书 -->
    <div class="width-img">
        <img src="https://img63.ddimg.cn/2022/8/9/2022080919292015817.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper children-content">
        </div>
    </div>

    <!-- 中小学用书 -->
    <div class="width-img">
        <img src="https://img61.ddimg.cn/2022/8/9/2022080919291822924.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper middleschool">
        </div>
    </div>

    <!-- 文艺 -->
    <div class="width-img">
        <img src="https://img60.ddimg.cn/2022/8/9/2022080919300122077.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper art">
        </div>
    </div>
    
    <!-- 社科 -->
    <div class="width-img">
        <img src="https://img63.ddimg.cn/2022/8/9/20220809192905282.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper society">
        </div>
    </div>

    <!-- 生活 -->
    <div class="width-img">
        <img src="https://img60.ddimg.cn/2022/8/9/2022080919294644594.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper live">
        </div>
    </div>

    <!-- 成功 -->
    <div class="width-img">
        <img src="https://img62.ddimg.cn/2022/8/9/2022080919292453166.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper success">
        </div>
    </div>

     <!-- 经管理财 -->
     <div class="width-img">
        <img src="https://img63.ddimg.cn/2022/8/9/2022080919292949111.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper economic">
        </div>
    </div>

     <!-- 青春动漫 -->
     <div class="width-img">
        <img src="https://img60.ddimg.cn/2022/8/9/2022080919285898773.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper animation">
        </div>
    </div>

     <!-- 特价 -->
     <div class="width-img">
        <img src="https://img63.ddimg.cn/2022/8/9/2022080919295117238.jpg" alt="">
    </div>
    <!-- swiper长轮播 -->
    <div class="swiper-container nav">
        <div class="swiper-wrapper specialoffer">
        </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="width-img">
        <img src="https://img60.ddimg.cn/upload_img/00743/suishiqi/caininxihuanb-1553687671.jpg" alt="">
    </div>
    <div class="like">
        <p class="like-word">猜您喜欢</p>
    </div>
    <!--  -->
    <div class="like-content">

    </div>

    <div class="look">
        <p>查看更多</p>
    </div>
    <div class="down">
        <img src="http://img60.ddimg.cn/upload_img/00610/new_index/icon_smile.png" alt="">
        <p>到底啦~再拉裤子都掉啦~</p>
    </div>
    <ul class="bottom">
        <li>
            <i class="iconfont icon-house b-picture"></i>
            <p>首页</p>
        </li>
        <li>
            <i class="iconfont icon-search b-picture"></i>
            <p>分类</p>
        </li>
       <li>
            <i class="iconfont icon-Bag b-picture"></i>
            <p>值得买</p>
        </li>
       <li>
            <i class="iconfont icon-carts b-picture"></i>
            <p>购物车</p>
        </li>
       <li>
            <i class="iconfont icon-people b-picture"></i>
            <p>用户</p>
        </li>
    </ul>
</body>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script src="js/reset-4.js"></script>
<script>
    var children=document.querySelector('.children-content');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=913086_51141452_796487_52733492&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed9").then(res=>res.json()).then(res=>{
        // console.log(res.ret[1].content.value);
        for(var i=0;i<res.ret[1].content.value.length;i++){
            children.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="price"></p>
                    </div>
                </div>
            </div>
            `
            // console.log(res.ret[1].content.value[i].product_tags[0].name.length)
            var price=document.querySelectorAll('.price');
            price[i].innerHTML+=``
            // for(var j=0;j<res.ret[1].content.value[1].product_tags[0].name.length;j++){
                // console.log(res.ret[1].content.value[1].product_tags[0].name);
                    price[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`

                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
                    });
                }
    })

    var middleschool=document.querySelector('.middleschool');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997496_51112159_796487_52733495&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        console.log(res.ret[1].content.value);
        for(var i=0;i<res.ret[1].content.value.length;i++){
            middleschool.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="middleschoolprice"></p>
                    </div>
                </div>
            </div>
            `
            var middleschoolprice=document.querySelectorAll('.middleschoolprice');
            middleschoolprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                middleschoolprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
                }
    })

    var art=document.querySelector('.art');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=913090_51141448_796487_52733524&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            art.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="artprice"></p>
                    </div>
                </div>
            </div>
            `
            var artprice=document.querySelectorAll('.artprice');
            artprice[i].innerHTML+=``
                // console.log(res.ret[1].content.value[1].product_tags[0].name);
                artprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var society=document.querySelector('.society');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=913096_51141450_796487_52733493&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            society.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="societyprice"></p>
                    </div>
                </div>
            </div>
            `
            var societyprice=document.querySelectorAll('.societyprice');
            societyprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                societyprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var live=document.querySelector('.live');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997789_51144655_796487_52733729&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            live.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="liveprice"></p>
                    </div>
                </div>
            </div>
            `
            var liveprice=document.querySelectorAll('.liveprice');
            liveprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                liveprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var success=document.querySelector('.success');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997497_51112142_796487_52733496&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            success.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="successprice"></p>
                    </div>
                </div>
            </div>
            `
            var successprice=document.querySelectorAll('.successprice');
            successprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                successprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var economic=document.querySelector('.economic');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997500_51112163_796487_52733494&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            economic.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="economicprice"></p>
                    </div>
                </div>
            </div>
            `
            var economicprice=document.querySelectorAll('.economicprice');
            economicprice[i].innerHTML+=``
                // console.log(res.ret[1].content.value[1].product_tags[0].name);
                economicprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var animation=document.querySelector('.animation');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997501_51112168_796487_52733491&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            animation.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="animationprice"></p>
                    </div>
                </div>
            </div>
            `
            var animationprice=document.querySelectorAll('.animationprice');
            animationprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                animationprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var specialoffer=document.querySelector('.specialoffer');
    fetch("http://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=997506_51112181_796487_52733521&user_client=touch&deviceType=&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91").then(res=>res.json()).then(res=>{
        for(var i=0;i<res.ret[1].content.value.length;i++){
            specialoffer.innerHTML+=`
            <div class="swiper-slide children-word">
                <div class="border-book">
                    <img src="${res.ret[1].content.value[i].img_url}" alt="">
                    <div class="price-book">
                        <p>${res.ret[1].content.value[i].product_name}</p>
                        <p>￥${res.ret[1].content.value[i].sale_price}</p>
                        <p class="specialofferprice"></p>
                    </div>
                </div>
            </div>
            `
            var specialofferprice=document.querySelectorAll('.specialofferprice');
            specialofferprice[i].innerHTML+=``
                console.log(res.ret[1].content.value[1].product_tags[0].name);
                specialofferprice[i].innerHTML+=`
                    <span>["${res.ret[1].content.value[i].product_tags[0].name}"]</span>`
                    new Swiper('.nav', {
                    pagination: '.nav .swiper-pagination',
                    slidesPerView: 3.5,
                    freeMode: true
        });
            }
    })

    var contentt=document.querySelector('.like-content');
    fetch("http://touch.m.dangdang.com/h5ajaxZ.php?action=get_top_sale_by_cid&user_client=touch&cids=01.00.00.00.00.00&img_size=h&page_no=1&page_size=100&client_version=1.0&app_id=touch&h5_server=1&udid=7ecd917f9569bc4cb900984feadcb178&permanent_id=20240816162956553704433397889989909").then(res=>res.json()).then(res=>{
        console.log(res)
        for(var i=0;i<res.content.length;i++){
            contentt.innerHTML+=`
            <div class="content-word">
                <img src="${res.content[i].image_url}" alt="">
                <p>${res.content[i].product_name}</p>
                <p>￥${res.content[i].price}</p>
            </div>
            `
        }
    })

    var swiper = new Swiper('.slider', {
        pagination: '.slider .swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
</script>

</html>